<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>联系我们</title>
		<link rel="icon" href="img/htmllogo.JPG">
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/contact.css">
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A5j0zidDv3y1zNLNRFDIVGXSOOsUdoXX"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
		<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
	</head>
	<body>
		<header>
			<div class="header">
				<div class="logo">
					<a href="index.html">
						<img src="img/logo.jpg">
					</a>
				</div>
				<nav>
					<ul>
						<li><a href="index.html">企业首页</a></li>
						<li><a href="about.html">关于我们</a></li>
						<li><a href="news.html">新闻中心</a></li>
						<li><a href="product.html">产品中心</a></li>
						<li><a href="services.html">客户服务</a></li>
						<li><a href="contact.html" class="active">联系我们</a></li>
					</ul>
				</nav>
				<div class="language">
					<a href="#" class="active">CN</a>
					<a href="#">EN</a>
				</div>
			</div>
		</header>
		<main>
			<section class="banner">
						<img src="img/about-banner.png" alt="" width="1920px">
			</section>
			<section class="about about2">
				<div class="sidebar">
					<div class="sidebar_title">
						<h4 a1>CONTACT US</h2>
						<h4>联系我们</h4>
					</div>
					<ul>
						<h4 a1>Carefully Create</h4>
						<h4 a2>And</h4>
						<h4 a2 a3>Elaborate Service</h4>
						<p>精心创造 精心服务</p>
					</ul>
					<div class="sidebar_title">
						<h4 a1>SEARACH</h4>
						<h4>搜索</h4>
					</div>
					<div class="sidebar_search">
						<ion-icon name="search-outline" class="search"></ion-icon>
						<input type="text">
					</div>
				</div>
				<div class="location">
					<h2>联系我们</h2>
					<p>CONTACT US</p>
					<ul>
						<li>您当前的位置 ></li>
						<li><a href="index.html">首页 ></a> </li>
						<li><a href="contact.html" class="active">联系我们</a> </li>
					</ul>
				</div>
				<hr>
				<div class="box_map">
				    <div class="map" id="map"></div>
				    <form action="#">
						<h2>给我留言</h2>
						<div class="liuyan">
							<label>姓名：<input type="text"></label> <br/>
							<label>邮箱：<input type="email"></label> <br/>
							<label class="contact">留言：</label><textarea class="textarea"></textarea><br>
						</div>
						<div class="Button">
							<input type="submit">
							<input type="reset">
						</div>
				    </form>
					<div class="contact_info">
					    <h2>联系方式</h2>
						<p>地址：湖北省黄石市湖北师范大学（学生宿舍6栋）</p>
						<p>手机：15385061777</p>
						<p>QQ： 1715889683</p>
						<p>邮箱：1715889683@qq.com</p>
					</div>
				</div>
			</section>
		</main>
		<footer>
		    <div class="footer-main">
		        <div class="footer-nav">
		            <dl>
		                <dt><a href="about.html">关于我们</a></dt>
		                <dd><a href="#">公司简介</a></dd>
		                <dd><a href="#">企业文化</a></dd>
		                <dd><a href="#">企业荣誉</a></dd>
		                <dd><a href="#">资格认证</a></dd>
		                <dd><a href="#">研发生产</a></dd>
		            </dl>
		            <dl>
		                <dt><a href="product.html">产品中心</a></dt>
		                <dd><a href="#">饮水机</a></dd>
		                <dd><a href="#">冰箱</a></dd>
		                <dd><a href="#">洗衣机</a></dd>
		                <dd><a href="#">空调</a></dd>
		                <dd><a href="#">其他产品</a></dd>
		            </dl>
		            <dl>
		                <dt><a href="news.html">新闻中心</a></dt>
		                <dd><a href="#">热点聚焦</a></dd>
		                <dd><a href="#">企业新闻</a></dd>
		                <dd><a href="#">行业新闻</a></dd>
		                <dd><a href="#">热点聚焦</a></dd>
		            </dl>
		            <dl>
		                <dt><a href="services.html">客户服务</a></dt>
		                <dd><a href="#">招商加盟</a></dd>
		                <dd><a href="#">购买流程</a></dd>
		                <dd><a href="#">售后服务</a></dd>
		                <dd><a href="#">技术支持</a></dd>
		                <dd><a href="#">常见问题</a></dd>
		            </dl>
		            <dl>
		                <dt><a href="contact.html">联系我们</a></dt>
		                <dd><a href="#">在线留言</a></dd>
		                <dd><a href="#">网上咨询</a></dd>
		                <dd><a href="#">联系我们</a></dd>
		            </dl>
		        </div>
		        <form action="">
		            <input type="text" placeholder="请输入您的姓名">
		            <input type="text" placeholder="请输入您的联系方式">
		            <textarea  name="" id="" cols="30" rows="10" placeholder="请输入您的留言"></textarea><br>
		            <input type="submit">
		        </form>
		    </div>
			<div class="footer-footer">Copyright?2016WenCun.com All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;Design by WenCun 粤ICP备13005446号-1</div>
		</footer>
	</body>
	<script type="text/javascript">
	  function initMap(){
	    createMap();
	    setMapEvent();
	    addMapControl();
	    addMapOverlay();
	  }
	  function createMap(){
	    map = new BMap.Map("map");
	    map.centerAndZoom(new BMap.Point(115.070348,30.232758),19);
	  }
	  function setMapEvent(){
	    map.enableScrollWheelZoom();
	    map.enableKeyboard();
	    map.enableDragging();
	    map.enableDoubleClickZoom()
	  }
	  function addClickHandler(target,window){
	    target.addEventListener("click",function(){
	      target.openInfoWindow(window);
	    });
	  }
	  function addMapOverlay(){
	    var markers = [
	      {content:"湖北师范大学学舍6栋",title:"宿舍所在地",imageOffset: {width:-40,height:-20},position:{lat:30.232758,lng:115.070348}}
	    ];
	    for(var index = 0; index < markers.length; index++ ){
	      var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
	      var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
	          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
	        })});
	      var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
	      var opts = {
	        width: 200,
	        title: markers[index].title,
	        enableMessage: false
	      };
	      var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
	      marker.setLabel(label);
	      addClickHandler(marker,infoWindow);
	      map.addOverlay(marker);
	    };
	  }
	  function addMapControl(){
	    var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	    map.addControl(navControl);
	  }
	  var map;
	  initMap();
	</script>
</html>
